<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>城市选择器.html</title>
    <script src="js/jquery-3.6.3.js"></script>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            list-style: none;
            box-sizing: border-box;
            text-decoration: none;
        }

        .clearfix::after {
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

        #city_src, #city_tar {
            height: 300px;
            width: 100px;
        }

        .left, .center, .right {
            float: left;
        }

        .center {
            height: 300px;
        }

        select {
            background-color: aquamarine;
            height: 100px;
            width: 50px;
        }

        .center button {
            display: block;
            width: 50px;
            height: 25px;
        }
    </style>
</head>
<body>
<div class="clearfix">
    <select class="left" name="city" id="city_src" multiple>
        <option>北京</option>
        <option>上海</option>
        <option>广州</option>
        <option>杭州</option>
        <option>西安</option>
    </select>

    <div class="center">
        <button id="sel_all">&gt;&gt;</button>
        <button id="back_all">&lt;&lt;</button>
        <button id="select">&gt;</button>
        <button id="back">&lt;</button>
    </div>

    <select class="right" name="city_tar" id="city_tar" multiple>
    </select>
</div>
</body>
<script>
    $(function (){
        $('#sel_all').click(function (){
            $('.left>option').appendTo($('.right'))
        })
        $('#back_all').click(function (){
            $('.right>option').appendTo($('.left'))
        })
        $('#select').click(function (){
            $('.left>option:selected').appendTo($('.right'))
        })
        $('#back').click(function (){
            $('.right>option:selected').appendTo($('.left'))
        })

    })
</script>
</html>